<template>
	<div class="order_data table-theme">
		<head-title title="数据--订单数据"></head-title>
		<div style="display: flex;">
			<div v-for="(item, index) in cardList" :key="index" style="margin-right: 20px;">
				<cardPanel :img="item.img" :title="item.title" :num="item.num" :color="item.color"></cardPanel>
			</div>
		</div>

		<el-row :gutter="20">
			<el-col :span="12">
				<div class="Order-column">
					<div class="chart-view-title">
						<span :class="{active: orderDataType==0}" @click="changeOrderData(0)">订单成交数</span>
						<span :class="{active: orderDataType==1}" @click="changeOrderData(1)">订单成交额</span>
					</div>
					<div class="chart-menu">
						<div class="chart-menu-left">
							<div class="tips">请选择</div>
							<div class="date-select">
								<el-select v-model="dateVal.year" placeholder="年份" @change="chartdateSelect(0, 0)">
									<el-option v-for="item in orderOptions.yearOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</div>
							<div class="date-select">
								<el-select v-model="dateVal.month" placeholder="月份" @change="chartdateSelect(0, 1)">
									<el-option v-for="item in orderOptions.monthOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</div>
						</div>
						<div class="chart-menu-right">
							<div class="right-time-select">
								<span @click="timeSelect(0, 0)" :class="[timeType1 == 0 ? 'active' : '']">年</span>
								<span @click="timeSelect(0, 1)" :class="[timeType1 == 1 ? 'active' : '']">月</span>
							</div>
						</div>
					</div>
					<BarChart :chart-data="orderData1"></BarChart>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="Order-statistics">
					<div class="data-menu">
						<span @click="dateSelect(0)" :class="[dateType == 0 ? 'active' : '']">日</span>
						<span @click="dateSelect(1)" :class="[dateType == 1 ? 'active' : '']">周</span>
						<span @click="dateSelect(2)" :class="[dateType == 2 ? 'active' : '']">月</span>
						<span @click="dateSelect(3)" :class="[dateType == 3 ? 'active' : '']">年</span>
					</div>
					<div class="data-panel">
						<el-row>
							<el-col :span="6">
								<div class="data-panel-item">
									<p>订单总额</p>
									<p>{{ timeOrderData.new.price }}</p>
								</div>
							</el-col>
							<el-col :span="6">
								<div class="data-panel-item">
									<p>订单总数</p>
									<p>{{ timeOrderData.new.all }}</p>
								</div>
							</el-col>
							<el-col :span="6">
								<div class="data-panel-item">
									<p>订单成交数</p>
									<p>{{ timeOrderData.new.succeed }}</p>
								</div>
							</el-col>
							<el-col :span="6">
								<div class="data-panel-item" style="border-right: none;">
									<p>订单成交率</p>
									<p>{{ timeOrderData.new.rate }}</p>
								</div>
							</el-col>
							<el-col :span="6">
								<div class="data-panel-item" style="border-bottom: none;">
									<p>{{ dateText }}订单总额</p>
									<p>{{ timeOrderData.old.price }}</p>
								</div>
							</el-col>
							<el-col :span="6">
								<div class="data-panel-item" style="border-bottom: none;">
									<p>{{ dateText }}订单总数</p>
									<p>{{ timeOrderData.old.all }}</p>
								</div>
							</el-col>
							<el-col :span="6">
								<div class="data-panel-item" style="border-bottom: none;">
									<p>{{ dateText }}订单成交数</p>
									<p>{{ timeOrderData.old.succeed }}</p>
								</div>
							</el-col>
							<el-col :span="6">
								<div class="data-panel-item" style="border: none;">
									<p>{{ dateText }}订单成交率</p>
									<p>{{ timeOrderData.old.rate }}</p>
								</div>
							</el-col>
						</el-row>
					</div>
				</div>
			</el-col>
		</el-row>

		<el-row :gutter="20">
			<el-col :span="12">
				<div class="Order-column">
					<div class="chart-view-title">订单总数</div>
					<div class="chart-menu">
						<div class="chart-menu-left">
							<div class="tips">请选择</div>
							<div class="date-select">
								<el-select v-model="dateVal2.year" placeholder="年份" @change="chartdateSelect(1, 0)">
									<el-option v-for="item in orderOptions.yearOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</div>
							<div class="date-select">
								<el-select v-model="dateVal2.month" placeholder="月份" @change="chartdateSelect(1, 1)">
									<el-option v-for="item in orderOptions.monthOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</div>
						</div>
						<div class="chart-menu-right">
							<div class="right-time-select">
								<span @click="timeSelect(1, 0)" :class="[timeType2 == 0 ? 'active' : '']">年</span>
								<span @click="timeSelect(1, 1)" :class="[timeType2 == 1 ? 'active' : '']">月</span>
							</div>
						</div>
					</div>
					<BarChart :chart-data="orderData2"></BarChart>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="Order-column">
					<div class="chart-view-title">订单成交率</div>
					<div class="chart-menu">
						<div class="chart-menu-left">
							<div class="tips">请选择</div>
							<div class="date-select">
								<el-select v-model="dateVal3.year" placeholder="年份" @change="chartdateSelect(2, 0)">
									<el-option v-for="item in orderOptions.yearOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</div>
							<div class="date-select">
								<el-select v-model="dateVal3.month" placeholder="月份" @change="chartdateSelect(2, 1)">
									<el-option v-for="item in orderOptions.monthOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</div>
						</div>
						<div class="chart-menu-right">
							<div class="right-time-select">
								<span @click="timeSelect(2, 0)" :class="[timeType3 == 0 ? 'active' : '']">年</span>
								<span @click="timeSelect(2, 1)" :class="[timeType3 == 1 ? 'active' : '']">月</span>
							</div>
						</div>
					</div>
					<percentageChart :chart-data="orderData3"></percentageChart>
				</div>
			</el-col>
		</el-row>

		<div class="order-list-data table-theme">
			<div class="order-list-data-view">
				<div class="order-top-menu">
					<div class="order-menu-left">
						<div class="date-select-view">
							<el-select v-model="OrderListSelectVal.year" placeholder="年份" @change="OrderListSelect">
								<el-option v-for="item in orderOptions.yearOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</div>

						<div class="date-select-view">
							<el-select v-model="OrderListSelectVal.month" placeholder="月份" @change="OrderListSelect">
								<el-option v-for="item in orderOptions.monthOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</div>
					</div>

					<div class="order-menu-right">
						<refresh-button @refresh="refreshPage"></refresh-button>
						<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
					</div>
				</div>
				
				<p style="text-align: right;line-height: 30px;"><span style="margin-right: 30px;">总订单金额:{{all_money}}</span>总数据数：{{total}}</p>
				<el-table :data="OrderListDataList" stripe>
					<el-table-column label="序号" align="center" prop="" width="80">
						<template slot-scope="scope">
							{{ scope.$index +1}}
						</template>
					</el-table-column>
					<el-table-column label="商户序号" align="center" prop="store.store_id" width="80"></el-table-column>
					<el-table-column label="头像" align="center" width="80">
						<template slot-scope="scope">
							<el-image :src="scope.row.store.store_logo" style="width: 50px; height: 50px; vertical-align: top;">
								<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
							</el-image>
						</template>
					</el-table-column>
					<el-table-column label="名字" align="center" prop="store.store_name"></el-table-column>
					<el-table-column label="电话" align="center" prop="store.phone"></el-table-column>
					<el-table-column label="跟单员" align="center" prop="service_name"></el-table-column>
					<el-table-column label="订单总数" align="center" prop="all"></el-table-column>
					<el-table-column label="订单成交数" align="center" prop="successd"></el-table-column>
					<el-table-column label="订单成交率" align="center" prop="rate"></el-table-column>
					<el-table-column label="订单金额" align="center" prop="money"></el-table-column>
				</el-table>
				<div class="pages">
					<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="getStoreData" :current-page="page"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import BarChart from './components/BarChart';
import percentageChart from './components/percentageChart';
import cardPanel from '@/components/card-panel';
export default {
	components: {
		BarChart,
		percentageChart,
		cardPanel
	},
	data() {
		return {
			type:'',
			all_money:'',
			date: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
			orderData1: {
				tips: '销售数',
				color: '#8bebe1',
				date: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
				data: []
			},
			orderData2: {
				tips: '销售数',
				color: '#a6c7fb',
				date: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
				data: []
			},
			orderData3: {
				tips: '成交率',
				color: '#ffbbc2',
				date: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
				data: []
			},
			orderOptions: {
				yearOptions: [
					{
						value: '2018',
						label: '2018'
					},
					{
						value: '2019',
						label: '2019'
					},
					{
						value: '2020',
						label: '2020'
					}
				],
				monthOptions: [
					{
						value: '01',
						label: '01'
					},
					{
						value: '02',
						label: '02'
					},
					{
						value: '03',
						label: '03'
					},
					{
						value: '04',
						label: '04'
					},
					{
						value: '05',
						label: '05'
					},
					{
						value: '06',
						label: '06'
					},
					{
						value: '07',
						label: '07'
					},
					{
						value: '08',
						label: '08'
					},
					{
						value: '09',
						label: '09'
					},
					{
						value: '10',
						label: '10'
					},
					{
						value: '11',
						label: '11'
					},
					{
						value: '12',
						label: '12'
					}
				]
			},
			timeType1: 0,
			timeType2: 0,
			timeType3: 0,
			dateType: 0, // 日周月年
			dateText: '昨日',
			dateTextList: ['昨日', '上周', '上个月', '上一年'],
			timeOrderData: {
				new: '',
				old: ''
			}, // 日周月年数据对比
			cardList: [
				{
					title: '订单总数(全部)',
					img: require('../../assets/image/ico_order@2x.png'),
					num: '0',
					color: '#61a1f9'
				},
				{
					title: '订单成交数(全部)',
					img: require('../../assets/image/ico_order_deal@2x.png'),
					num: '0',
					color: '#0BC6B2'
				},
				{
					title: '订单成交率(全部)',
					img: require('../../assets/image/ico_Turnoverrate@2x.png'),
					num: '0',
					color: '#FE7A85'
				}
			],
			dateVal: {
				year: new Date().getFullYear(),
				month: this.getCurrentMonth(new Date().getMonth() + 1)
			},
			dateVal2: {
				year: new Date().getFullYear(),
				month: this.getCurrentMonth(new Date().getMonth() + 1)
			},
			dateVal3: {
				year: new Date().getFullYear(),
				month: this.getCurrentMonth(new Date().getMonth() + 1)
			},
			selectContent: '',
			classSelect: 0,
			OrderListDataList: [],
			OrderListSelectVal: {
				year: '',
				month: ''
			},
			page: 0,
			total: 0,
			totalData: 0, 
			orderDataType: 0,
			searchOption: [{
				value: 0,
				label: '商户ID'
			}]
		};
	},
	methods: {
		init(type, day, time) {
			let data = {
				type: type,
				day: day,
				time: time,
				store_id: localStorage.getItem('store_id')
			};
			this.$http(this.$ApiList.OrderData, data).then(res => {
				if (res.code == 200) {
					if (type == 1) {
						// 订单总数
						this.orderData2.data = [];
						
						if (time.toString().indexOf('-') != -1) {
							this.orderData2.date = [];
						} else {
							this.orderData2.date = this.date;
						}
						
						if (time.toString().indexOf('-') != -1) {
							res.datas.all.forEach(item => {
								this.orderData2.date.push(item.add_time);
								this.orderData2.data.push(item.counts);
							});
						} else {
							this.orderData2.data = this.proofreadingTime(res.datas.all);
						}
					} else if (type == 2) {
						// 成交数
						this.orderData1.data = [];
						
						if (time.toString().indexOf('-') != -1) {
							this.orderData1.date = [];
						} else {
							this.orderData1.date = this.date;
						}
						
						if(this.orderDataType==0){
							this.orderData1.tips = '订单成交数'
							if (time.toString().indexOf('-') != -1) {
								res.datas.succeed.forEach(item => {
									this.orderData1.date.push(item.add_time);
									this.orderData1.data.push(item.counts);
								});
							} else {
								this.orderData1.data = this.proofreadingTime(res.datas.succeed);
							}
						}else{
							this.orderData1.tips = '订单成交额'
							if (time.toString().indexOf('-') != -1) {
								res.datas.account.forEach(item => {
									this.orderData1.date.push(item.add_time);
									this.orderData1.data.push(item.counts);
								});
							} else {
								this.orderData1.data = this.proofreadingTime(res.datas.account);
							}
						}
					} else if (type == 3) {
						// 订单成交率
						this.orderData3.data = [];
						
						if (time.toString().indexOf('-') != -1) {
							this.orderData3.date = [];
						} else {
							this.orderData3.date = this.date;
						}
						
						if (time.toString().indexOf('-') != -1) {
							res.datas.rate.forEach(item => {
								this.orderData3.date.push(item.add_time);
								this.orderData3.data.push(item.rate.replace(/%/, ''));
							});
						} else {
							this.orderData3.data = this.proofreadingTime(res.datas.rate,1);
						}
					}
				}
			});
		},
		timeSelect(type, index) {
			if (type == 0) {
				this.timeType1 = index;
				if (index == 0) {
					this.init(2, 2, this.dateVal.year);
				} else {
					this.init(2, 3, this.dateVal.year + '-' + this.dateVal.month);
				}
			} else if (type == 1) {
				this.timeType2 = index;
				if (index == 0) {
					this.init(1, 2, this.dateVal2.year);
				} else {
					this.init(1, 3, this.dateVal2.year + '-' + this.dateVal2.month);
				}
			} else if (type == 2) {
				this.timeType3 = index;
				if (index == 0) {
					this.init(3, 2, this.dateVal3.year);
				} else {
					this.init(3, 3, this.dateVal3.year + '-' + this.dateVal3.month);
				}
			}
		},
		// 订单对比数据时间选择
		dateSelect(index) {
			this.dateType = index;
			this.dateText = this.dateTextList[index];
			this.getOrderComparison();
		},
		// 获取订单对比数据
		getOrderComparison() {
			let data = {
				store_id: localStorage.getItem('store_id')
			};
			let dayList = [4, 3, 2, 1];
			data.day = dayList[this.dateType];
			this.$http(this.$ApiList.OrderContrastData, data).then(res => {
				if (res.code == 200) {
					if (this.dateType == 0) {
						this.timeOrderData.new = res.datas.today;
						this.timeOrderData.old = res.datas.yesterday;
					} else if (this.dateType == 1) {
						this.timeOrderData.new = res.datas.week;
						this.timeOrderData.old = res.datas.last_week;
					} else if (this.dateType == 2) {
						this.timeOrderData.new = res.datas.month;
						this.timeOrderData.old = res.datas.last_month;
					} else if (this.dateType == 3) {
						this.timeOrderData.new = res.datas.year;
						this.timeOrderData.old = res.datas.last_year;
					}
					this.cardList[0].num = res.datas.all.all.toString();
					this.cardList[1].num = res.datas.all.succeed.toString();
					this.cardList[2].num = res.datas.all.rate;
				}
			});
		},
		chartdateSelect(index, type) {
			if (index == 0) {
				if (type == 0) {
					this.timeType1 = 0
					this.init(2, 2, this.dateVal.year);
				} else {
					this.timeType1 = 1;
					this.init(2, 3, this.dateVal.year + '-' + this.dateVal.month);
				}
			} else if (index == 1) {
				if (type == 0) {
					this.timeType2 = 0
					this.init(1, 2, this.dateVal2.year);
				} else {
					this.timeType2 = 1;
					this.init(1, 3, this.dateVal2.year + '-' + this.dateVal2.month);
				}
			} else if (index == 2) {
				if (type == 0) {
					this.timeType3 = 0
					this.init(3, 2, this.dateVal3.year);
				} else {
					this.timeType3 = 1;
					this.init(3, 3, this.dateVal3.year + '-' + this.dateVal3.month);
				}
			}
		},
		getCurrentMonth(month) {
			if (month < 10) {
				month = 0 + '' + month;
			}
			return month;
		},
		searchSelect() {
			this.selectContent = '';
			if (this.classSelect == 1) {
				this.selectText = '请输入商戶ID';
			}
		},
		// 订单列表数据分析
		getStoreData(e) {
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
				goods_store_id: localStorage.getItem('store_id')
			};
			if (this.OrderListSelectVal.year == '') {
				data.day = 1;
			} else if (this.OrderListSelectVal.month == '') {
				data.day = 2;
				data.time = this.OrderListSelectVal.year;
			} else {
				data.day = 3;
				data.time = this.OrderListSelectVal.year + '-' + this.OrderListSelectVal.month;
			}

			if (this.selectContent != '' && this.classSelect == 0) {
				data.store_id = this.selectContent;
			}

			this.$http(this.$ApiList.OrderListData, data).then(res => {
				if (res.code == 200 && res.datas.list.length > 0) {
					this.OrderListDataList = res.datas.list;
					this.total = res.datas.count;
					this.all_money = res.datas.all_money
				}
			});
		},
		// 筛选订单列表数据
		OrderListSelect() {
			this.getStoreData();
		},
		// 刷新订单列表数据
		refreshPage() {
			this.OrderListSelectVal.year = '';
			this.OrderListSelectVal.month = '';
			this.selectContent = '';
			this.classSelect = '1';
           	this.getStoreData()
		},
		// 搜索订单列表数据
		goSearch(classSelect, selectContent) {
			this.classSelect = classSelect;
			this.selectContent = selectContent;
			this.getStoreData();
		},
		getYear() {
			this.orderOptions.yearOptions = [];
			let yearNum = new Date().getFullYear() + 1;
			for (let i = 2018; i < yearNum; i++) {
				let year = {
					value: i,
					label: i
				};
				this.orderOptions.yearOptions.push(year);
			}
		},
		proofreadingTime(data,type) {
			let orderData = [];
			let addTimeList = [];
			let dateContrast = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
			data.forEach(item => {
				addTimeList.push(item.add_time);
			});

			for (let i = 0; i < dateContrast.length; i++) {
				let index = addTimeList.indexOf(dateContrast[i]);
				if (index != -1) {
					if(type){
						orderData.push(data[index].rate.replace(/%/, ''));
					}else{
						orderData.push(data[index].counts);
					}
				} else {
					orderData.push(0);
				}
			}
			return orderData;	
		},
		changeOrderData(index){
			this.orderDataType = index
			if (this.timeType1 == 0) {
				this.init(2, 2, this.dateVal.year);
			} else {
				this.init(2, 3, this.dateVal.year + '-' + this.dateVal.month);
			}
		}
	},

	created() {
		let year = new Date().getFullYear();
		this.getYear();
		this.init(1, 2, year);
		this.init(2, 2, year);
		this.init(3, 2, year);
		this.getStoreData();
		this.getOrderComparison();
	}
};
</script>
<style lang="scss">
.Order-column,
.Order-statistics {
	margin-top: 20px;
	background-color: #ffffff;
	box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.14);
	border-radius: 4px;
}
.Order-column .chart-view-title {
	margin: 0 28px;
	line-height: 44px;
	font-size: 16px;
	font-weight: bold;
	border-bottom: 1px solid #dedede;
	color: #333;
	display: flex;
	span{
		margin-right: 20px;
		cursor: pointer;
		&.active{
			border-bottom: 4px solid #2073f5;
		}
	}
}
.Order-column .chart-menu {
	margin-top: 26px;
	padding: 0 28px 0 40px;
	display: flex;
}
.Order-column .chart-menu .chart-menu-left {
	display: flex;
	flex: 1;
}
.Order-column .chart-menu .tips {
	margin-right: 12px;
	line-height: 30px;
}
.date-select {
	margin-right: 10px;
	width: 80px;
}
.Order-column .chart-menu .chart-menu-left .el-input__inner,
.chart-menu-left .el-select__caret,
.el-select-dropdown__item {
	height: 30px;
	line-height: 30px;
}
/* 年日月选择 */
.Order-column .chart-menu .chart-menu-right {
	display: flex;
	flex: 1;
	flex-direction: row-reverse;
	align-items: center;
}
.Order-column .chart-menu .chart-menu-right .right-time-select {
	display: flex;
	height: 24px;
}
.Order-column .chart-menu .chart-menu-right span {
	display: block;
	width: 34px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	background: #f2f2f2;
	cursor: pointer;
}
.Order-column .chart-menu .chart-menu-right .active {
	color: #ffffff;
	background: #999999;
}
.Order-column .chart-menu .chart-menu-right span:nth-child(1) {
	border-radius: 4px 0 0 4px;
}
.Order-column .chart-menu .chart-menu-right span:nth-child(2) {
	border-radius: 0 4px 4px 0;
}
/* 日周月年订单 */
.Order-statistics .data-menu {
	margin: 0 36px;
	line-height: 45px;
	font-size: 16px;
	font-weight: bold;
	border-bottom: 1px solid #dedede;
	color: #333;
}
.Order-statistics .data-menu span {
	display: inline-block;
	width: 50px;
	line-height: 28px;
	text-align: center;
	cursor: pointer;
}
.Order-statistics .data-menu .active {
	border-bottom: 4px solid #2073f5;
}
.Order-statistics .data-panel {
	padding: 18px 66px 20px 66px;
	text-align: center;
}
.Order-statistics .data-panel .data-panel-item {
	padding: 20px 0 33px 0;
	border-right: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
}

.Order-statistics .data-panel .data-panel-item p:first-child {
	margin-bottom: 56px;
	line-height: 15px;
	color: #666666;
}
.Order-statistics .data-panel .data-panel-item p:last-child {
	font-size: 24px;
	font-weight: bold;
	color: #333333;
}
/* 订单数据列表 */
.order-list-data {
	margin-top: 20px;
}
.order-list-data-view {
	padding: 20px 20px;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.14);
}
.order_data .order-top-menu {
	display: flex;
}
.order_data .refresh-btn {
	margin-left: 10px;
}
.order-menu-left {
	flex: 1;
	display: flex;
}
.order-menu-right {
	flex: 2;
	display: flex;
	flex-direction: row-reverse;
}

.date-select-view {
	margin-right: 10px;
	width: 120px;
}

.order-top-menu .input-with-select .el-input-group__prepend {
	width: 110px;
	background-color: #fff;
}
.order-top-menu .input-with-select .el-input__inner:nth-child(2) {
	width: 150px;
	padding-right: 15px;
}

</style>
